<template>
  <div class="header">
    <div class="icon" @click="clickIcon">
      <el-icon v-if="isClosed"><Expand /></el-icon>
      <el-icon v-else><Fold /></el-icon>
    </div>
    <div class="user">
      <el-menu
        class="logout"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
      >
        <el-sub-menu index="2">
          <template #title><el-avatar :src="avatar" :size="50" /></template>
          <el-menu-item index="2-1" @click="logoutt">退出登录</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { Expand, Fold } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { logout } from "../api/login";
export default {
  name: "Header",
  components: { Expand, Fold },
  data() {
    return {
      isClosed: true,
      userInfo: {},
      avatar: "",
    };
  },
  mounted() {
    const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = userInfo;
    this.avatar = userInfo["avatar"];
  },
  computed: {
    updateAvatar() {
      return this.$store.getters.getUpdateAvatarUrl;
    },
  },
  watch: {
    updateAvatar: {
      handler(newVal) {
        this.avatar = newVal;
      },
    },
  },
  methods: {
    clickIcon() {
      this.isClosed = !this.isClosed;
      this.$emit("getClosed", this.isClosed);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logoutt() {
      console.log("hello");
      logout().then((res) => {
        if (res.code == 200) {
          localStorage.removeItem("token");
          this.$router.push("/login");
          this.$store.commit("SET_ISLOGIN", true);
          ElMessage.success("退出登录成功");
        } else {
          ElMessage.error("退出登录失败");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid;
  border-color: rgb(187, 192, 197);
  box-shadow: 1px 1px 3px rgb(187, 192, 197);
  .icon {
    cursor: pointer;
    font-size: 20px;
    padding: 15px;
  }

  .user {
    .logout {
      margin: 6px;
      margin-bottom: 0;
      border: none;
    }
  }
}
</style>
